<template>
    <div class="logger-page">
        <div class="type-top-box">
            <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="时间：">
                    <el-date-picker
                        v-model="valueTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="人员AD：">
                    <el-input v-model="formInline.ad" placeholder="请输入关键字搜索"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="initData()">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table v-loading="thisLoading" :border="true" :data="tableData" size="small" height="68vh">
            <el-table-column align="center" label="操作人AD" width="170">
                <template slot-scope="scope">
                    <span class="ad-names">{{scope.row.ad}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="userNm" label="操作人姓名"></el-table-column>
            <el-table-column align="center" label="操作时间">
                <template slot-scope="scope">
                    <span>{{changeTimeValue(scope.row.createTime)}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作内容">
                <template slot-scope="scope">
                    <span>{{scope.row.content}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作前数据">
                <template slot-scope="scope">
                    <div @click="showText(scope.row.originObject)" class="json-text">{{scope.row.originObject}}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作后数据">
                <template slot-scope="scope">
                    <div @click="showText(scope.row.modifyObject)" class="json-text">{{scope.row.modifyObject}}</div>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-total">
            <pagination-table
                :total="total"
                :currentPage="pageIndex"
                :pagesize="formInline.pageSize"
                @pageChange="pageChange"
                @sizeChange="sizeChange"
            ></pagination-table>
        </div>
        <show-json ref="showjson"></show-json>
    </div>
</template>
<script>
import Vue from "vue";
import { logListApi } from "@/api/getData";
import ShowJson from "@/components/public/showjson";
import PaginationTable from "@/components/public/paginationTable";
import { Form, FormItem, Table, TableColumn , DatePicker } from "element-ui";
import { parse } from 'path';
Vue.use(Form);
Vue.use(Table);
Vue.use(FormItem);
Vue.use(DatePicker);
Vue.use(TableColumn);
export default {
    name:"LogList",
    components: {
        "show-json":ShowJson,
        "pagination-table": PaginationTable
    },
    data(){
        return {
            total:20,
            valueTime:[],
            formInline:{
                ad:"",
                endDate:"",
                startDate:"",
                pageIndex:0,
                pageSize:20,
            },
            pageIndex: 1,
            tableData:[],
            thisLoading:false,
        }
    },
    mounted(){
        this.initData();
    },
    methods:{
        async initData(param){
            try {
                if(this.valueTime.length > 0){
                    this.formInline.startDate = this.valueTime[0];
                    this.formInline.endDate = this.valueTime[1];
                }
                if(!param){
                    this.formInline.pageIndex = 0;
                    this.pageIndex = 1;
                    this.total = 0;
                }
                var params = JSON.parse(JSON.stringify(this.formInline));
                params.startDate = this.changeTimeValue(params.startDate)
                params.endDate = this.changeTimeValue(params.endDate)
                // console.log(params)
                let data = await logListApi(params);
                this.tableData = data;
                this.total = data[0].total;
            } catch (error) {
                console.log(error)
            }
        },
        changeTimeValue(num){
            return num ? moment(num).format("YYYY-MM-DD HH:mm:ss") : "";
        },
        pageChange(num){
            this.formInline.pageIndex = num - 1;
            this.initData("set");
        },
        sizeChange(num){
            this.formInline.pageSize = num;
            this.initData();
        },
        showText(data){
            this.$refs.showjson.showText(data);
        }
    }
}
</script>
<style lang="less" scoped>
@import url("./less/authagent.less");
</style>